import { FC, useCallback } from 'react';
import { connect, Loading, ConnectProps } from 'umi';
import styles from './index.less';
import { HomeModelState } from './model';
import { TabBar } from 'antd-mobile';
import { throttle } from 'lodash';

interface PageProps extends ConnectProps {
  home: HomeModelState;
  loading: boolean;
}

const IndexPage: FC<PageProps> = function ({ home, dispatch }) {
  const { tabKey } = home;
  const tabs = [
    {
      key: 'home',
      title: '主页',
    },
    {
      key: 'my',
      title: '我的',
    },
  ];
  const changeTab = useCallback(
    throttle(function (key) {
      dispatch &&
        dispatch({
          type: 'home/changeTab',
          payload: {
            tabKey: key,
          },
        });
    }, 300),
    [],
  );
  return (
    <div className={styles.homePage}>
      <div className={styles.content}></div>
      <div className={styles.bar}>
        <TabBar onChange={changeTab} activeKey={tabKey}>
          {tabs.map((item) => (
            <TabBar.Item key={item.key} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
};

export default connect(
  ({ home, loading }: { home: HomeModelState; loading: Loading }) => ({
    home,
    loading: loading.models.home,
  }),
)(IndexPage);
